<template>
  <div class="father">
    <div class="mt-4" style="width: 30%">
      <el-input v-model="input3" class="input-with-select">
        <template #prepend>
          <el-select v-model="select" placeholder="选择" style="width: 115px">
            <el-option label="日期" value="1" />
            <el-option label="患者ID" value="2" />
            <el-option label="姓名" value="3" />
          </el-select>
        </template>
        <template #append>
          <el-button
            ><el-icon><Search /></el-icon
          ></el-button>
        </template>
      </el-input>
    </div>
    <el-table :data="data" border style="width: 100%">
      <el-table-column prop="day" label="挂号日期" width="240" />
      <el-table-column prop="patientId" label="患者ID" width="240" />
      <el-table-column prop="name" label="患者姓名" width="240" />

      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="handleEdit(scope.$index, scope.row)"
            >病例报告</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <template>
      <el-pagination small layout="prev, pager, next" :total="50" />
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="50"
        class="mt-4"
      />
    </template>
  </div>
  <el-dialog v-model="dialogVisible2" title="病例编辑" width="60%">
    <el-form>
      <el-form-item label="内容">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="info"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button
          type="primary"
          @click="editorialCases()"
          v-model="dialogVisible2"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { get,post } from '@/utils/request'
import { ElMessage } from 'element-plus'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  data() {
    return {
      loginState: sessionStorage.login,
      doctor: {
        docId: sessionStorage.docId
      },
      data: [],
      input3: '',
      dialogVisible2: false,
      form: [],
      types: [],
      content: '',
      Edit: [],
      info:"",
      PatientCases:{
        patientId:"",
        docId:"",
        info:""
      }
    }
  },
  components: { Editor, Toolbar },
  setup() {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref('')

    // 模拟 ajax 异步获取内容
    onMounted(() => {
      setTimeout(() => {
        valueHtml.value = ''
      }, 1500)
    })

    const toolbarConfig = {}
    const editorConfig = { placeholder: '请输入内容...' }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated
    }
  },
  mounted(){
   this.getPatientDoctorByDoctorId()
  },
  methods: {
    getPatientDoctorByDoctorId(){
       get('/getPatientDoctorByDoctorId', { docId: this.doctor.docId }).then(
      (res) => {
        this.data = res.data.data
        console.log(this.data)
      }
    )
    },
    handleEdit(a, b) {
      this.dialogVisible2 = !this.dialogVisible2
      this.patientId=b.patientId
      this.docId=b.docId
      console.log(a,this.data[a])
      this.info=this.data[a].info
    },
    editorialCases() {
      this.dialogVisible2 = !this.dialogVisible2
      this.PatientCases.docId=this.docId
      this.PatientCases.patientId=this.patientId
      this.PatientCases.info=this.info
      console.log(this.PatientCases)
      post('/setPatientInfo',this.PatientCases)
      .then((res) => {
        console.log(res),
        this.getPatientDoctorByDoctorId(),
          ElMessage({
            message: '修改成功！',
            type: 'success'
          })
      })
    }
  }
}
</script>

<style>
.father {
  margin-top: 15px;
}
</style>